<!--  이미지 슬라이더
		상품을 선택하여 이미지 슬라이더로 나올 수 있도록 합니다.
		디폴트는 3개이며, 리스트로 받아와 넣으면 됩니다.
		by 김기석
	 	-->
<!-- 수정 진승민 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<style>
#imageSlider {
	width: 1100px;
	padding-bottom: 20px;
}
/* 슬라이드 외부 박스 디자인 by 기석*/
.imageBox {
	position: relative;
	width: 800px;
	height: 250px;
	overflow: hidden;
}

/* 슬라이드 내부 이미지 설정 by 기석*/
.sliderImage {
	width: 400px;
	height: 250px;
}

/* Slider Text Panel , 나중에 가능하면 추가기능으로 글씨제공 희망사항 by 기석*/
.slider_text_penal {
	position: absolute;
	top: 200px;
	left: 50px;
}

.slider_text {
	position: absolute;
	width: 250px;
	height: 150px;
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		var screensize = $('.container').width();
		var sliderPosition = (screensize - 800) / 2 + 10;
		$('#imageSlider').css('margin-left', sliderPosition);
		var product_height = $('.shop_product').height();
		/* DB로 게시물 받아오면, 갯수에 따른 사이즈 조절. 테스트 해봐야 함 */
		/* var product_num = $('product_list'); */
		var product_num = 8;
		var product_height = product_height * ((product_num / 3) + 1);
		$("#product_board").css('height', product_height);
	});
</script>
<script>
	$(function() {
		//슬라이더 이미지의 가로크기
		var img_width = 400,

		// 슬라이더 이미지의 갯수
		// 3개로 지정
		img_cnt = 3,
		//슬라이더 페이지 지속시간 타이머 변수
		myTimer,

		//slider 객체 생성.
		slider = {

			//slider할 이미지의 위치 초기화 작업을 진행.
			init : function() {
				$(".imageBox > IMG").each(function(i) {
					var left = i * img_width;
					$(this).css({
						'position' : 'absolute',
						'left' : left + 'px'
					});
				})
			},

			//이미지 animation 효과
			//슬라이드 이동 속도 조절 'fast,slow or number'
			motion : function() {
				$(".imageBox > IMG").animate({
					'left' : '-=' + img_width + 'px'
				}, 'slow', function() {
					slider.update(); //animation이 완료되면 position을 update
				})
			},

			//이미지 position update
			update : function() {
				$(".imageBox > IMG").each(
						function() {
							if (parseInt($(this).css('left')) < 0)
								$(this).css('left',
										(img_width * (img_cnt - 1)) + 'px');
						})
			},
			//이미지 slider 시작
			//slider 갱신시간 조절 가능
			start : function() {
				slider.init();
				myTimer = setInterval(function() {
					slider.motion();
				}, 4000);
			}
		}
		slider.start();
	})
</script>
</head>
<div class="imageSlider"<s:if test="shop_blog.blog_slider==0">style="display:none"</s:if>>
<table class="table table-stripted" style="width:1100px;">
	<tr>
		<th class="text-left"><a><span
				class="glyphicon glyphicon-gift"></span>&nbsp;&nbsp;인기 상품</a></th>
	</tr>
	<tr><td></td></tr>
</table>
<div id="imageSlider">	
		<div class="imageBox">
			<!-- 슬라이드 이미지 리스트 이미지 -->
			<s:iterator value="imageList">
				<img class="sliderImage"
					src="data:image/jpg;base64,${product_image2 }" />
			</s:iterator>
		</div>
	</div>	
</div>
</html>